Ext.onReady(function() {
	var dataArray = eval("("+photoData+")");
	
	/**
	 * 需要加载的数据
	 */
	var loadData = new Array();
	
	/**
	 * 单条记录
	 */
	var singleRecord;
	
	for (var i=0; i<dataArray.length; i++) {
		singleRecord = new Array();
		
		singleRecord[0] = parseInt(dataArray[i].CL_CODE);
      	singleRecord[1] = dataArray[i].PL_CODE;
      	singleRecord[2] = dataArray[i].CL_NAME;
      	singleRecord[3] = dataArray[i].CL_PCODE;
      	singleRecord[4] = dataArray[i].PARM;
      	singleRecord[5] = dataArray[i].IDX;
      	singleRecord[6] = dataArray[i].REMARKED;
      	
      	loadData[i] = singleRecord;
	}
	
    var store = new Ext.data.ArrayStore({
        proxy   : new Ext.data.MemoryProxy(),

        fields  : ['CL_CODE', 'PL_CODE', 'CL_NAME', 'CL_PCODE', 'PARM', 'IDX', 'REMARKED'],
        sortInfo: {
            field    : 'CL_NAME',
            direction: 'ASC'
        }
    });
            
    store.loadData(loadData);
    
    var dataview = new Ext.DataView({
        store: store,
        
        tpl  : new Ext.XTemplate(
            '<ul>',
                '<tpl for=".">',
                    '<li class="phone">',
                        '<img width="64" height="64" src="{PARM}" />',
                        '<strong>{CL_NAME}</strong>',
                    '</li>',
                '</tpl>',
            '</ul>'
        ),
        
        plugins : [
            new Ext.ux.DataViewTransition({
                duration  : 550,
                idProperty: 'CL_CODE'
            })
        ],
        
        id: 'phones',
        itemSelector: 'li.phone',
        overClass   : 'phone-hover',
        singleSelect: true,
        multiSelect : true,
        autoScroll  : true,
        
        listeners:{'click':function() {
        		var records = this.getSelectedRecords();
        		
        		var clCode = records[0].data.CL_CODE;
        		var linkUrl = records[0].data.REMARKED;
        		var clName = records[0].data.CL_NAME;
        		
		    	var tab=null;
		    	var id = 'tab-' + clCode;
		    	tab=Ext.getCmp(id);
		    		    	
		    	if(!tab){
		    		tab=rightTab.add(new Ext.Panel({
			                id: id,
			                title: clName,
			                layout: 'fit',
			                html:'<iframe id="if_dbsy"'+clCode+' src="'+linkUrl
			                	+'" height="100%" width="100%" frameborder="0" top="0" left="0"></iframe>',
			                closable: true
			            }));
		            rightTab.setActiveTab(tab);
		    	}else{
		    		rightTab.setActiveTab(tab);
		    	}
		    	mainPanel.doLayout();
        	}
        }
    });
       
    var welcomePanel = new Ext.Panel({
        layout: 'fit',
        items : dataview,
        width : 1000,
        height : 300,
        renderTo: 'welcomebody'
    });
        
    doSort();
   
    function doSort() {
        store.sort(getSorters(), "ASC");
    };
    
    function getSorters() {
        var sorters = [{
            field: 'CL_NAME',
            direction: 'DESC'
        }];
    
        return sorters;
    }
});